<script>
import { reactive } from 'vue'

export default {
    setup(){
        // 定义变量
        // 在组合式API直接声明的变量，就是一个普通的变量，不是响应式属性
        // 修改属性时，不会再视图中产生效果
        let msg = "今天天气真不错"
        let count = 0

        //可以通过reactive()来创建一个响应式的对象
        const stu = reactive({
            name:"孙悟空",
            age:18,
            gender:"男",
        })

        function changeage(){
            stu.name = "猪八戒"
        }

        // 在setup()中可以通过过返回值来指定哪些内容暴露给外部
        //暴露后的内容，可以在模板中使用
        return{
            msg,
            count,
            stu,
            changeage
        }
    }


}
</script>

<template>
    <h1>演示组合式API</h1>
    <h2>{{ msg }}</h2>
    <button @click="changeage()">点我一下</button>
    <h2>{{ stu.name }}--{{ stu.age }}--{{ stu.gender }}</h2>
</template>